﻿<!DOCTYPE html>
<html lang="en"  class="no-js" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>学习视频</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="css/img/favicon.png">
    <link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.min.css">
    <!-- Place favicon.ico in the root directory -->

    <!-- CSS here -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/odometer.css">
    <link rel="stylesheet" href="css/aos.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <style type="text/css">
        .dv {
            position: relative;
            left: 880px;
            bottom: 480px;
            width: 350px;
            height: 150px;
        }
        .imgs{
            float: left;
            height: 80px
        }
        .uls{
            height: 467px;
        }
    </style>
</head>
<body>
<div id="preloader">
    <div id="ctn-preloader" class="ctn-preloader">
        <div class="animation-preloader">
            <div class="spinner"></div>
            <div class="txt-loading">
                        <span data-text-preloader="E" class="letters-loading">
                            E
                        </span>
                <span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
                <span data-text-preloader="S" class="letters-loading">
                            S
                        </span>
                <span data-text-preloader="T" class="letters-loading">
                            T
                        </span>
                <span data-text-preloader="U" class="letters-loading">
                            U
                        </span>
                <span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
                <span data-text-preloader="Y" class="letters-loading">
                            Y
                        </span>
            </div>
        </div>
        <div class="loader">
            <div class="row">
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- preloader end -->


<!-- Scroll-top -->
<button class="scroll-top scroll-to-target" data-target="html">
    <i class="fas fa-angle-up"></i>
</button>
<!-- Scroll-top-end-->


<!-- header-area -->
<header>
    <div class="header-top-wrap d-none d-md-block">
        <div class="container-fluid container-full">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6">
                    <div class="d-flex align-items-center">
                        <div class="header-top-library">
                            <a href="#">图书馆我们<i class="fas fa-angle-down"></i></a>
                        </div>
                        <div class="header-top-search">
                            <form action="#">
                                <input type="text" placeholder="Search...">
                                <button><i class="fas fa-search"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="header-right-list">
                        <div class="header-top-social">
                            <ul>
                                <li>联系我们</li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li>
                                    <a href="#"><i class="fab fa-weibo"></i> </a></li>
                                <li><a href="tencent://message/?uin=1092535160&Menu=yes& Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"><i class="fab fa-qq"></i></a></li>
                                <li id="weixin_hover" ><a href="#"><i class="fab fa-weixin"></i>
                                    <ul>
                                        <img class="qrcode" id="weixin_img"  src="css/img/product/wx_01.png" alt="wx:K15035689083"/>
                                    </ul>
                                </a></li>
                            </ul>
                        </div>
                        <div class="header-user-login">
                            <a href="login.html"><i class="fas fa-user-circle"></i>登陆</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="sticky-header" class="main-header menu-area header-style-two">
        <div class="container-fluid container-full">
            <div class="row">
                <div class="col-12">
                    <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                    <div class="menu-wrap">
                        <nav class="menu-nav show">
                            <div class="logo">
                                <a href="index.html">
                                    <img src="css/img/logo/logo_2.png" alt="Logo">
                                </a>
                            </div>
                            <div class="navbar-wrap main-menu d-none d-lg-flex">
                                <ul class="navigation">
                                    <li class="current dropdown"><a href="index.html">首页</a>
                                        <!--                                                <ul class="submenu">-->
                                        <!--                                                    <li class="active"><a href="index.html">首页一</a></li>-->
                                        <!--                                                    <li><a href="index-2.html">首页二</a></li>-->
                                        <!--                                                </ul>-->
                                    </li>
                                    <li><a href="about-us.html">关于</a></li>
                                    <li class="current active"><a href="/lb">课程</a></li>
                                    <li ><a href="/shijuan">考试</a></li>
                                    <li class="current"><a href="/shop">商城</a></li>
                                    <li class="current dropdown"><a href="#">公告</a>
                                        <ul class="submenu">
                                            <li><a href="blog.html">公告中心</a></li>
                                            <li><a href="blog-details.html">消息中心</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="contact.html">联系我们</a></li>
                                    <li class="current dropdown"><a href="personal/menuAdmin.html">个人中心</a>
                                        <ul class="submenu">
                                            <li><a href="/selectByid2">我的积分</a></li>
                                            <li><a href="/selectByid">我的信息</a></li>
                                            <li><a href="/Gradelist">我的成绩</a></li>
                                            <li><a href="/Orderlist">我的订单</a></li>
                                            <li><a href="/totest">问题反馈</a></li>
                                            <li><a href="keceng.html">我的课程</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="header-action d-none d-md-block">
                                <ul>
                                    <li class="header-shop-cart"><a href="#"><i class="fas fa-shopping-basket"></i><span>0</span></a>
                                        <ul class="minicart">
                                            <li class="d-flex align-items-start">
                                                <div class="cart-img">
                                                    <a href="#">
                                                        <img src="css/img/product/cart_p01.jpg" alt="">
                                                    </a>
                                                </div>
                                                <div class="cart-content">
                                                    <h4>
                                                        <a href="#">慈善耐克品牌黄色 T-Shirt</a>
                                                    </h4>
                                                    <div class="cart-price">
                                                        <span class="new">$229.9</span>
                                                        <span>
                                                                    <del>$229.9</del>
                                                                </span>
                                                    </div>
                                                </div>
                                                <div class="del-icon">
                                                    <a href="#">
                                                        <i class="far fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="d-flex align-items-start">
                                                <div class="cart-img">
                                                    <a href="#">
                                                        <img src="css/img/product/cart_p02.jpg" alt="">
                                                    </a>
                                                </div>
                                                <div class="cart-content">
                                                    <h4>
                                                        <a href="#">学生包</a>
                                                    </h4>
                                                    <div class="cart-price">
                                                        <span class="new">$229.9</span>
                                                        <span>
                                                                    <del>$229.9</del>
                                                                </span>
                                                    </div>
                                                </div>
                                                <div class="del-icon">
                                                    <a href="#">
                                                        <i class="far fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="total-price">
                                                    <span class="f-left">总:</span>
                                                    <span class="f-right">$239.9</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="checkout-link">
                                                    <a href="#">购物车</a>
                                                    <a class="red-color" href="#">清空</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-btn"><a href="#" class="btn">免费月份</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <!-- Mobile Menu  -->
                    <div class="mobile-menu">
                        <div class="menu-backdrop"></div>
                        <div class="close-btn"><i class="fas fa-times"></i></div>

                        <nav class="menu-box">
                            <div class="nav-logo"><a href="index.html"><img src="css/img/logo/logo.png" alt="" title=""></a></div>
                            <div class="menu-outer">
                                <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                            </div>
                            <div class="social-links">
                                <ul class="clearfix">
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
                                    <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                    <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                    <li><a href="#"><span class="fab fa-youtube"></span></a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <!-- End Mobile Menu -->
                </div>
            </div>
        </div>
    </div>
</header>
<!--<a href="/lb">返回课程列表</a>-->
<section>
    <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"   controls preload="none" >
        <source th:src="${lists2.getVideopath()}" type='video/mp4'  />
    </video>
    <div class="dv">
        <h3 style="font-family: sans-serif;margin-bottom: 30px">相关推荐</h3>
        <ul class="uls">
<!--            <h5 style="font-family: sans-serif;">您可能感兴趣</h5>-->
            <li style="margin-bottom: 20px"><img src="css/img/blog/1.jpg" class="imgs" style="margin-right: 10px"><a href="#"><span>国外大数据系统研究的先河之作，用三个部分讲述了大数据时代的思维变革、商业变革和管理变革。</span></a></li><br/>
            <li style="margin-bottom: 20px"><img src="css/img/blog/2.jpg" class="imgs" style="margin-right: 10px"><a href="#"><span>国外大数据系统研究的先河之作，用三个部分讲述了大数据时代的思维变革、商业变革和管理变革。</span></a></li><br/>
            <li style="margin-bottom: 20px"><img src="css/img/blog/5.jpg" class="imgs" style="margin-right: 10px"><a href="#"><span>国外大数据系统研究的先河之作，用三个部分讲述了大数据时代的思维变革、商业变革和管理变革。</span></a> </li><br/>
            <li style="margin-bottom: 20px"><img src="css/img/blog/6.png" class="imgs" style="margin-right: 10px"><a href="#"><span>国外大数据系统研究的先河之作，用三个部分讲述了大数据时代的思维变革、商业变革和管理变革。</span></a></li>
        </ul>
    </div>
</section>
<div class="container" style="margin-left: 0px;">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active btn" data-toggle="tab" href="#home">简介</a>
        </li>
        <li class="nav-item">
            <a class="nav-link btn" data-toggle="tab" href="#menu1">评论</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home" class="container tab-pane active"><br>
            <p  th:text="${lists2.getDescribe()}" style="width: 800px;"></p>
        </div>
        <div id="menu1" class="comment-avatar-info container tab-pane fade"><br>
            <tr  th:each="cour:${coures}">
                <input type="hidden" id="courseid" th:value="${cour.getCourseid()}"/>
                <p th:text="${cour.namess}" style="font-size: 20px"></p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <p class="comment-date" th:text="${cour.getText()}"></p>
                <p th:text="${cour.getEmail()}"></p>
                <abbr style="border-bottom: 1px dotted #000; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</abbr>
            </tr>
            <div class="comment-reply-box mb-50">
                <h5 class="b-details-inner-title mb-20">在这里留言</h5>
                <form  id="add" class="comment-form" >
                    <p>您的电子邮件地址不会被公开。必需的地方已做标记 *</p>
                    <textarea  id="comment-message" placeholder="你的评论" name="text"></textarea>
                    <div class="row">
                        <div class="col-md-4">
                            <input type="email" placeholder="你的邮件*" name="email">
                        </div>
                        <div class="col-md-4">
                            <input type="hidden" th:value="${lists2.getId()}" name="nameid" readonly>
                        </div>
                        <div class="col-md-4">
                            <input type="hidden" th:value="${lists2.getId()}" name="courseid" readonly>
                        </div>
                    </div>
                    <button id="comment" class="btn" type="button">发表评论</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<footer>
    <div class="footer-top black-bg pt-95 pb-45">
        <div class="container-fluid container-full">
            <div class="row justify-content-between">
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>关于我们</h5>
                        </div>
                        <div class="fw-text">
                            <p>Arwhal pop intellientsia pinterest微剂量代字云面包gochujang。</p>
                            <div class="footer-contact-list mt-20">
                                <ul>
                                    <li>732/21 King Street，金斯敦英国</li>
                                    <li>1-577-245-658742</li>
                                    <li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4aba2a2ada7a184a1bca5a9b4a8a1eaa7aba9">[电子邮件保护]</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>快速链接</h5>
                        </div>
                        <div class="fw-links">
                            <ul>
                                <li><a href="#">家</a></li>
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">作品集</a></li>
                                <li><a href="#">博客</a></li>
                                <li><a href="#">联系我们</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>热门课程</h5>
                        </div>
                        <div class="footer-courses">
                            <ul>
                                <li>
                                    <div class="f-courses-thumb">
                                        <a href="#"><img src="css/img/courses/f_courses_thumb01.jpg" alt=""></a>
                                    </div>
                                    <div class="f-courses-content">
                                        <h5><a href="#">Access 2016基本培训培训示例</a></h5>
                                        <span>托诺·普约（Tonoy Pueyo）</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="f-courses-thumb">
                                        <a href="#"><img src="css/img/courses/f_courses_thumb02.jpg" alt=""></a>
                                    </div>
                                    <div class="f-courses-content">
                                        <h5><a href="#">Python编程基础培训示例</a></h5>
                                        <span>马克·维恩斯</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>Twitter的饲料</h5>
                        </div>
                        <div class="fw-tweet-post">
                            <ul>
                                <li>
                                    <i class="fab fa-twitter"></i>
                                    <div class="fw-tweet-post-content">
                                        <p>这里谈到的 <a href="#">https://t.ew/ARkjsdsd</a>
                                            该恒星#theme是任何类型的发</p>
                                        <span>3个月前</span>
                                    </div>
                                </li>
                                <li>
                                    <i class="fab fa-twitter"></i>
                                    <div class="fw-tweet-post-content">
                                        <p>这里谈到的 <a href="#">https://t.ew/ARkjsdsd</a>
                                            该恒星#theme是任何类型的发</p>
                                        <span>3个月前</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright-area">
        <div class="container-fluid container-full">
            <div class="row">
                <div class="col-md-6">
                    <div class="copyright-text">
                        <p>版权所有©2020<a target="_blank" href="http://www.edupro.com.cn/">多元合创</a>保留所有权利</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="payment-method-img text-center text-md-right">
                        <img src="css/img/images/payment_method_img.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</html>
<script src="css/js/vendor/jquery-3.5.0.min.js"></script>
<script src="css/js/popper.min.js"></script>
<script src="css/js/bootstrap.min.js"></script>
<script src="css/js/isotope.pkgd.min.js"></script>
<script src="css/js/imagesloaded.pkgd.min.js"></script>
<script src="css/js/jquery.magnific-popup.min.js"></script>
<script src="css/js/owl.carousel.min.js"></script>
<script src="css/js/jquery.odometer.min.js"></script>
<script src="css/js/jquery-ui.min.js"></script>
<script src="css/js/jquery.appear.js"></script>
<script src="css/js/slick.min.js"></script>
<script src="css/js/ajax-form.js"></script>
<script src="css/js/wow.min.js"></script>
<script src="css/js/aos.js"></script>
<script src="css/js/plugins.js"></script>
<script src="css/js/main.js"></script>
<script type="text/javascript">
    var player = videojs('example_video_1', {
        muted: false,
        controls: true,
        height: 500,
        width: 800,
        loop: true,
    });
    $("#comment").click(function () {
        var id = $("#courseid").val();
        var href = "couseSp?id="+id;
        $.ajax({
            url:'/addinfo',
            data:$("#add").serializeArray(),
            type:'post',
            success: function (result) {
                if (result=="1"){
                    // alert("评论成功")
                    window.location.href=href
                }else{
                    alert("数据失败");
                }
            },error:function () {
                alert("获取数据失败")

            }
        })
    })
</script>